import React, { Component } from 'react';
import { TextInput, StatusBar, View, Image, Text, TouchableOpacity } from 'react-native';
import { unitWidth, unitHeight, height } from '../constants/AdapterUtil';
import { CodeInput, IconInput, MyInput1, CodeInput2 } from '../components/Input';
import { SubmitButton1 } from '../components/Button';
import TextUtil from '../constants/TextUtil';
import { MyHeader } from '../components/MyHeader';
import { postFetch } from '../constants/HttpExtension';
import { show } from '../constants/Toast';
import { api_account_forget, api_member_info_updatePassword } from '../constants/HttpServices';
import Colors from '../constants/Colors';

export default class ChangePasswordScreen extends Component {

    constructor(props) {
        super(props)
        this.state = {
            oldPassword: '',
            password: '',
            confirmPassword: '',
        }
    }

    componentDidMount() {

    }

    render() {
        return (
            <View style={{ flex: 1, alignItems: 'center' }}>
                <MyHeader leftImg={require('../res/ic_arrow_left.png')} leftClick={() => { this.props.navigation.pop() }} title='修改密码' />
                <MyInput1
                    style={{ marginTop: 0 * unitWidth }}
                    onChangeText={this.onOldPasswordTextChange.bind(this)}
                    title={
                        <Text style={{ color: Colors.black, fontSize: 17 }}>*原密码：</Text>
                    }
                    maxLength={20}
                    secureTextEntry={true}
                    placeholder='请输入原密码'
                    value={this.state.oldPassword} isLast={false} />
                <MyInput1
                    style={{ marginTop: 0 * unitWidth }}
                    onChangeText={this.onPasswordTextChange.bind(this)}
                    title={
                        <Text style={{ color: Colors.black, fontSize: 17 }}>*新密码：</Text>
                    }
                    maxLength={20}
                    secureTextEntry={true}
                    placeholder='请输入新密码'
                    value={this.state.password} isLast={false} />
                <MyInput1
                    style={{ marginTop: 0 * unitWidth }}
                    onChangeText={this.onConfirmPasswordTextChange.bind(this)}
                    title={
                        <Text style={{ color: Colors.black, fontSize: 17 }}>*确认新密码：</Text>
                    }
                    maxLength={20}
                    secureTextEntry={true}
                    placeholder='请再次输入新密码'
                    value={this.state.confirmPassword} isLast={true} />
                <SubmitButton1 style={{ marginTop: 208 * unitWidth }} text='确定' onPress={this.submit.bind(this)} />
            </View >
        )
    }

    onOldPasswordTextChange(text) {
        this.setState({
            oldPassword: text
        })
    }

    onPasswordTextChange(text) {
        this.setState({
            password: text
        })
    }

    onConfirmPasswordTextChange(text) {
        this.setState({
            confirmPassword: text
        })
    }

    submit() {
        if (this.state.oldPassword == '') {
            show('请输入原密码');
            return;
        } else if (this.state.password == '') {
            show('请输入新密码');
            return;
        } else if (this.state.confirmPassword == '') {
            show('请输入再次输入新密码');
            return;
        } else if (this.state.password != this.state.confirmPassword) {
            show('两次输入密码不一致');
            return;
        }
        let params = {
            "old_pwd": this.state.oldPassword,
            "new_pwd": this.state.password,
        }
        postFetch(api_member_info_updatePassword, params, {
            success: (response) => {
                show(response.result.message);
                this.props.navigation.pop();
            },
            fail: (response) => {
                show(response.result.message);
            }
        })
    }
}